<template>
	<picker mode="date" fields="month" :start="start" :end="now" @change="changeDate">
		<view class="pick-time fillx bsp10">
			时间选择
			<view class="pick-time-icon iconfont icon-shangxiajiantou"></view>
			<view class="pick-time-box autoxy">
				{{now}}
			</view>
	</picker>
</template>

<script>
	export default {
		props:{
			mode:{
				type:String,
				default:'date'
			},
			fields:{
				type:String,
				default:'month'
			},
			range:{
				type:Number,
				default:3
			}
		},
		data() {
			return {
				
			}
		},
		computed:{
			start(){
				let now=new Date()
				let y=now.getFullYear()-this.range
				return y-3+'-'+'01'
			},
			now(){
				let now=new Date()
				let y=now.getFullYear()
				let m=now.getMonth()+1
				m=m>9?m:'0'+m
				return y+'-'+m
			}
		}
	}
</script>

<style scoped>
	.pick-time{
			font-size: 15px;
			font-weight: normal;
			color: #000000;
			padding: 10px;
			background-color: #fff;
			position: relative;
		}
		.pick-time-box{
			display: inline-block;
			padding: 5px 10px;
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);
			background-color: #f2f2f2;
			border-radius: 1vw;
		}
		.pick-time-icon{
			display: inline-block;
			margin-left: 5px;
		}
</style>
